<style scoped>
    .main {
        margin: 10px 100px;
    }

    .logo {
        width: 150px;
        height: 150px;
    }

    .weather {
        line-height: 50px;
        font-size: 22px;
    }
</style>

<template>
    <div id="head-title">
        <Row>
            <i-col span="3">
                <img src="../../assets/anji-logo.jpg" class="logo">
            </i-col>
            <i-col span="9">
                <h1>全国老年远程教育实验区</h1>
                <h2>安吉县教学管理平台</h2>
            </i-col>
            <i-col span="2" style="padding-top:15px;">
                <img :src="weather.day_weather_pic">
            </i-col>
            <i-col span="7" className="weather">
                <p>{{getTodayString}}</p>
                <p>白天：{{weather.day_air_temperature}}&nbsp;&#8451; | 夜间：{{weather.night_air_temperature}}&nbsp;&#8451;</p>
                <p>风力：{{weather.day_wind_power}} | 紫外线：{{weather.ziwaixian}}</p>
            </i-col>
            <i-col span="3" style="padding-top:10px;">
                <img src="../../assets/hsp-logo.png">
            </i-col>
        </Row>
    </div>
</template>

<script>
    import Axios from "../../axios";
    import Common from "../../common";

    export default {
        name: "head-title",
        data() {
            return {
                weather: {}
            }
        },
        created() {
            this.fetchWeather();
        },
        computed: {
            getTodayString() {
                const now = new Date();
                return now.format("YYYY年MM月DD日 星期" + Common.formatWeek(now.getDay()));
            }
        },
        methods: {
            fetchWeather() {
                const url = "https://ali-weather.showapi.com/phone-post-code-weeather?";
                Axios.get(url, {
                    params: {
                        need3HourForcast: 0,
                        needAlarm: 0,
                        needHourData: 0,
                        needIndex: 0,
                        needMoreDay: 0,
                        post_code: 313300
                    },
                    headers: {
                        Authorization: "APPCODE 98c888f1fec74a1ba9fe4ed684cc5643"
                    }
                }).then((response) => {
                    if (response.data.showapi_res_code === 0) {
                        this.weather = response.data.showapi_res_body.f1;
                    } else {
                        this.$Message.error("获取天气信息失败:[" + response.data.showapi_res_code + "]," + response.data.showapi_res_error);
                    }
                });
            }
        }
    }
</script>
